<template>
  <div class="my-order">
    <van-tabs @click="orderTab" title-active-color="#f85415">
      <van-tab title="全部" style="font-size:.32rem"></van-tab>
      <van-tab title="待支付"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>
    <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"></van-list> -->
    <div class="order-list">
      <ul>
        <li v-for="(item,index) in list" :key="item.id">
          <div class="order-head">
            <p>
              <span>订单编号：</span>
              <strong>{{item.orderNumber}}</strong>
            </p>
            <p style="color:#333;" v-if="item.status==0">已完成</p>
            <p style="color:#f85415;" v-else>未支付</p>
          </div>
          <div class="order-info">
            <h2 @click="toOrderDetail">{{item.orderName}}</h2>
            <p class="money" v-if="item.status==0">
              <span>实付金额：</span>
              <strong>¥</strong>
              <span>2300</span>
            </p>
            <p class="money" v-else>
              <span>应付金额：</span>
              <strong>¥</strong>
              <span>2300</span>
            </p>
          </div>
          <div class="order-footer" v-if="item.status==1">
            <p>
              <span>19:34</span>后自动取消
            </p>
            <p @click="cancelOrder">取消订单</p>
            <p>去支付</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { List, Tab, Tabs, Toast } from "vant";

export default {
  components: {
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Toast.name]: Toast
  },
  data() {
    return {
      list: [
        {
          orderNumber: "123456789",
          status: 0,
          orderName:
            "自然拼读·78期自然拼读·78期自然拼读·78期自然拼读·78期自然拼读·78期自然拼读·78期自然拼读·78期自然拼读·78期",
          money: 50,
          timeOver: "19:30"
        },
        {
          orderNumber: "123456789",
          status: 1,
          orderName: "自然拼读·78期",
          money: 50,
          timeOver: "19:30"
        },
        {
          orderNumber: "123456789",
          status: 0,
          orderName: "自然拼读·78期",
          money: 50,
          timeOver: "19:30"
        }
      ],
      loading: false,
      finished: false
    };
  },
  methods: {
    toOrderDetail () {
      this.$router.push({path:'/OrderDetail'})
    },
    cancelOrder () {
       this.$router.push({path:'/RefundDetail'})
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    orderTab(index, title) {
      Toast.loading({
        duration: 1000, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: "spinner",
        message: "加载中..."
      });
    }
  }
};
</script>
<style>
.van-ellipsis {
  font-size: 0.32rem;
}
</style>

<style lang="scss" scoped>
.order-list {
  margin-top: 0.3rem;
  ul {
    li {
      min-height: 3.24rem;
      background: #fff;
      margin-bottom: 0.3rem;
      .order-head {
        height: 1rem;
        padding: 0 0.4rem;
        display: flex;
        display: -webkit-flex;
        -webkit-align-items: center;
        border-bottom: 1px solid #e5e5e5;
        justify-content: space-between;
        p {
          &:nth-child(1) {
            span {
              color: #666;
              font-size: 0.28rem;
            }
            strong {
              font-size: 0.3rem;
              color: #ccc;
            }
          }
          &:nth-child(2) {
            font-size: 0.28rem;
            color: #333;
          }
        }
      }
      .order-info {
        padding: 0 0.4rem;
        h2 {
          padding-top: 0.35rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: #333;
          font-size: 0.36rem;
          height: 0.9rem;
          line-height: 140%;
          padding-bottom: 0.1rem;
        }
        p.money {
          text-align: right;

          span:nth-child(1) {
            color: #333;
            font-size: 0.28rem;
          }
          strong {
            color: #f85415;
            font-size: 0.26rem;
          }
          span:nth-child(3) {
            color: #f85415;
            font-size: 0.28rem;
          }
        }
      }
      .order-footer {
        padding: 0.3rem 0.4rem;
        display: flex;
        display: -webkit-flex;
        -webkit-align-items: center;
        border-bottom: 1px solid #e5e5e5;
        justify-content: space-between;
        p:nth-child(1) {
          font-size: 0.28rem;
          color: #999;
          span {
            color: #f85415;
            font-size: 0.28rem;
          }
        }
        p:nth-child(2) {
          width: 1.88rem;
          height: 0.66rem;
          border: 1px solid #666666;
          border-radius: 0.4rem;
          line-height: 0.66rem;
          text-align: center;
          font-size: 0.28rem;
          color: #666666;
          &:active {
            background: #666666;
            color: #fff;
          }
        }
        p:nth-child(3) {
          width: 1.88rem;
          height: 0.66rem;
          border: 1px solid #f85415;
          background: #f85415;
          border-radius: 0.4rem;
          line-height: 0.66rem;
          text-align: center;
          font-size: 0.28rem;
          color: #fff;
          &:active {
            background: #cb4612;
          }
        }
      }
    }
  }
}
</style>


